<template>
	<view>
		<cu-custom bgColor="bg-cyan" isBack>
			<block slot="content">Flex演示</block>
		</cu-custom>
		<view class=""text>flex布局</view>
		<view class="content">flex布局是子元素同一行显示</view>
		<view class="flex">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
		</view>
		<view class="content">子元素个数超出行宽仍同一行显示</view>
		<view class="flex">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
			<view class="flex-item">e</view>
			<view class="flex-item">f</view>
			<view class="flex-item">g</view>
			<view class="flex-item">h</view>
			<view class="flex-item">i</view>
		</view>
		<view class="content">改变排版方向</view>
		<view class="content">flex-direction: row默认排版方向</view>
		<view class="flex-row">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">flex-direction: flex-row-reverse从右到左排版</view>
		<view class="flex-row-reverse">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">flex-direction:column竖直排版</view>
		<view class="flex-column">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">flex-direction:column-reverse倒序竖直排版</view>
		<view class="flex-column-reverse">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="text">flex-wrap换行显示</view>
		<view class="content">默认值nowrap不换行</view>
		<view class="content">nowrap换行</view>
		<view class="flex-wrap">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
			<view class="flex-item">e</view>
			<view class="flex-item">f</view>
			<view class="flex-item">g</view>
			<view class="flex-item">h</view>
		</view>
		<view class="content">wrap-reverse倒叙换行</view>
		<view class="flex-wrap-reverse">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
			<view class="flex-item">e</view>
			<view class="flex-item">f</view>
			<view class="flex-item">g</view>
			<view class="flex-item">h</view>
		</view>
		<view class="text">justify-content主轴排版（row轴横column轴纵）</view>
		<view class="content">flex-start 靠左</view>
		<view class="flex-start">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">flex-center 靠中</view>
		<view class="flex-center">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">flex-end 靠右</view>
		<view class="flex-end">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">space-around子元素间隔相等</view>
		<view class="space-around">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">space-between两端对齐</view>
		<view class="space-between">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="text">align-items辅轴</view>
		<view class="content">flex-start顶端对齐</view>
		<view class="box aif-start">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">flex-center居中对齐</view>
		<view class="box aif-center">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">flex-end底部对齐</view>
		<view class="box aif-end">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">stretch铺满铺轴</view>
		<view class="box aif-stretch">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="content">baseline第一行文字的基线对齐</view>
		<view class="box aif-baseline">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
		</view>
		<view class="text">align-content</view>
		<view class="content">flex-start</view>
		<view class="box ac-start">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
			<view class="flex-item">e</view>
			<view class="flex-item">f</view>
			<view class="flex-item">g</view>
			<view class="flex-item">g</view>
			<view class="flex-item">h</view>
		</view>
		<view class="content">center辅轴居中</view>
		<view class="box ac-center">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
			<view class="flex-item">e</view>
			<view class="flex-item">f</view>
			<view class="flex-item">g</view>
			<view class="flex-item">g</view>
			<view class="flex-item">h</view>
		</view>
		<view class="content">flex-end辅轴居下</view>
		<view class="box ac-end">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
			<view class="flex-item">e</view>
			<view class="flex-item">f</view>
			<view class="flex-item">g</view>
			<view class="flex-item">g</view>
			<view class="flex-item">h</view>
		</view>
		<view class="content">space-around辅轴间隔相等</view>
		<view class="box ac-around">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
			<view class="flex-item">e</view>
			<view class="flex-item">f</view>
			<view class="flex-item">g</view>
			<view class="flex-item">g</view>
			<view class="flex-item">h</view>
		</view>
		<view class="content">space-between辅轴上下两端对齐</view>
		<view class="box ac-between">
			<view class="flex-item">a</view>
			<view class="flex-item">b</view>
			<view class="flex-item">c</view>
			<view class="flex-item">d</view>
			<view class="flex-item">e</view>
			<view class="flex-item">f</view>
			<view class="flex-item">g</view>
			<view class="flex-item">g</view>
			<view class="flex-item">h</view>
		</view>
		<view class="text">flex子属性flex-grow属性</view>
		<view class="content">利用flex-grow均分形宽</view>
		<view class="flex">
			<view class="grow">a</view>
			<view class="grow">b</view>
			<view class="grow">c</view>
			<view class="grow">d</view>
		</view>
		<view class="content">利用flex-grow按比例分割</view>
		<view class="flex rate">
			<view class="grow">a</view>
			<view class="grow">b</view>
			<view class="grow">c</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	@import './flex.css'
</style>